<template>
	<view class="wrap">
		<view class="top">
			<view>
				<image class="logo" src="../../static/images/logo.png"></image>
			</view>
			<view class="title">科技特派员考核上报</view>
		</view>
		<view class="content">
			<view class="tablist">
				<u-tabs  :list="tabList" :is-scroll="false" :current="current" @change="tabChange"></u-tabs>
			</view>
			<view class="username">
				<u-input  v-model="username" type="text" height="80" :border="true" placeholder="用户名" />
			</view>
			<view class="password">
				<u-input class="password" v-model="password" type="password" height="80" :border="true" placeholder="密码" />
			</view>
			<button @tap="login" :style="[inputStyle]" class="getCaptcha">登录</button>
			<!-- <view class="alternative">
				<view class="issue">忘记密码</view>
			</view> -->
		</view>
		<view class="bottom"></view>

	</view>
</template>

<script>
	import request from '../../util/request.js'
	import api from '../../util/api.js'
	
	export default {
		data() {
			return {
				tabList: [{
						name: '用户登录'
					},
					// {
					// 	name: '注册'
					// }
				],
				current: 0,
				username: '',
				password: '',
			}
		},
		computed: {
			inputStyle() {
				let style = {
					
				};
				if (this.username) {
					style.color = "#fff";
					style.backgroundColor = '#2f7df9';
				}
				return style;
			}
		},
		onLoad() {
			let userInfo=uni.getStorageSync("userInfo");
			if(userInfo){
				uni.navigateTo({
					url:'../index/index'
				})
			}
		},
		methods: {
			tabChange(index) {
				this.current = index;
			},
			login(){
				if(this.username==""||this.password==""){
					uni.showToast({
						icon:'none',
						title:'用户名或者密码不能为空'
					})
				}else{
					request.post(api.login,{
						username:this.username,
						password:this.password
					}).then(response=>{
						console.log(response);
						uni.showToast({
							icon:'none',
							title:response.data.msg
						})
						if(response.data.status==2){
							uni.setStorageSync('userInfo',response.data.data);
							uni.navigateTo({
								url:'../index/index'
							})
						}
						
						console.log(response);
						
					}).catch(ex=>{
						console.log(ex);
						uni.showToast({
							icon:'none',
							title:'请求失败，请稍后再试'
						})
					})
					
				}
				
				// this.$u.route({
				// 	url: 'pages/index/index'
				// })
			}
			
		}
	};
</script>

<style lang="scss" scoped>
	.top {
		background-image: url('');
		background-size: 100% 100%;
		height: 500rpx;
		text-align: center;
		padding-top: 80rpx;
	}
	.logo{
		width: 180rpx;
		height: 180rpx;
		margin-bottom: 10rpx;
	}

	.title {
		font-size: 40rpx;
		margin: 0 auto;
		color: #ffffff;
		font-weight: bold;
	}
	.tablist{
		margin-bottom: 60rpx;
	}
	.username{
		margin-bottom: 20rpx;
	}
	.password{
		margin-bottom: 40rpx;
	}
	.bottom{
		position: fixed;
		bottom: 20rpx;
		text-align: center;
		width: 100%;
		margin: 0 auto;
	}
	.wrap {
		font-size: 28rpx;

		.content {
			border-radius: 5px;
			box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
			width: 650rpx;
			margin: 80rpx auto 0;
			padding: 40px 20rpx;
			padding-top: 30rpx;
			margin-top: -130rpx;
			background-color: #FFFFFF;

			input {
				text-align: left;
				margin-bottom: 10rpx;
				padding-bottom: 6rpx;

			}

			.tips {
				color: $u-type-info;
				margin-bottom: 60rpx;
				margin-top: 8rpx;
			}

			.getCaptcha {
				background-color: #F1F1F1;
				color: $u-tips-color;
				border: none;
				font-size: 30rpx;
				padding: 12rpx 0;

				&::after {
					border: none;
				}
			}

			.alternative {
				color: $u-tips-color;
				display: flex;
				justify-content: flex-end;
				margin-top: 30rpx;
			}
		}

	}
</style>
